<template>
    <view class="container">
        <view class="avatar">
            <image src="/static/images/avatar.png"></image>
        </view>

        <view class="form">
            <u--form labelPosition="left" :model="business" :rules="rules" ref="uForm">

                <u-form-item label="手机" prop="mobile" borderBottom>
                    <u--input v-model="business.mobile" border="none" placeholder="请输入手机号"></u--input>
                </u-form-item>

                <u-form-item label="密码" prop="password" borderBottom>
                    <u--input type="password" v-model="business.password" border="none" placeholder="请输入密码"></u--input>
                </u-form-item>

                <view style="margin-top: 25px;">
                    <u-button type="warning" @click="onSubmit">注册 / 登录</u-button>
                </view>
            </u--form>
            
        </view>

        <view class="agreement">
            <u-checkbox-group v-model="AgreementArr">
                <u-checkbox name="agreement" label="我已阅读并同意" shape="circle" />
                <navigator class="url" url="/pages/business/agreement">用户服务协议、隐私政策</navigator>
            </u-checkbox-group>
        </view>

        <!-- 信息提示 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
export default {
    data() {
        return {
            business:{
                mobile:'',
                password:''
            },
            rules:{
                mobile:[
                    {
                        // 自定义验证函数，见上说明
                        validator: (rule, value, callback) => {
                            // 上面有说，返回true表示校验通过，返回false表示不通过
                            // uni.$u.test.mobile()就是返回true或者false的
                            if (value) {
                                // uView工具函数 => 手机号格式验证 验证通过 true 验证不通过 false
                                return uni.$u.test.mobile(value);
                            } else {
                                return false;
                            }
                        },
                        type: 'string',// 数据类型
                        required: true,// 必填
                        message: '手机号码不正确',// 提示信息
                        // 触发器可以同时用blur和change
                        trigger: ['change', 'blur'],// 触发事件
                    }
                ],
                password: {
                    type: 'string',
                    required: true,
                    message: '请填写密码',
                    trigger: ['blur', 'change']
                },
            },
            AgreementArr:[]
        }
    },
    methods: {
        onSubmit()
        {
            if(this.AgreementArr.length === 0)
            {
                this.$refs.uToast.show({
                    type:'error',
                    message:'请先同意用户服务协议等'
                })

                return false;
            }

            this.$refs.uForm.validate().then(() => {
                this.$refs.uToast.show({
                    loading:true,
                    type:'loading',
                    message:'登录中',
                    complete:async () =>
                    {
                        let params = {
                            mobile:this.business.mobile,
                            password:this.business.password
                        }

                        let result = await uni.$u.http.post('/business/web',params);
                    
                        if(result.code === 1)
                        {
                            this.$refs.uToast.show({
                                type:'success',
                                message:result.msg,
                                complete:() =>
                                {
                                    uni.setStorageSync('business',result.data);

                                    uni.$u.route({
                                        type:'back'
                                    })
                                }
                            })
                        }else{
                            this.$refs.uToast.show({
                                type:'error',
                                message:result.msg
                            })
                        }
                    
                    }
                })
            }).catch((err) => {})
        }
    },
}
</script>

<style>
page{
    background-color: #f8fafe;
}

.container .avatar {
    text-align: center;
    background-color: #fff;
}

.avatar image{
    width: 120px;
    height: 120px;
    margin: 50px 0;
    border-radius: 50%;
}

.form{
    margin: 0 50rpx;
    box-sizing: border-box;
}

.agreement{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    font-size: 14px;
}

navigator{
    color: #33ccff;
}
</style>